import React from 'react'
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
import './swiper.css'
import { useEffect } from 'react'
export default function Swipers(props) {
    useEffect(()=> {
        var mySwiper = new Swiper ('.swiper', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            // 如果需要分页器
            autoplay: {
                delay: 1500,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            }
          })   
          
    },[])
    // console.log(props.banner);
  return (
    <div>
        <div className="swiper">
            <div className="swiper-wrapper">
                
                {
                    props.banner.map((item,index) => {
                        return <div className="swiper-slide" key={index}>
                            <img src={item} alt="" />
                        </div>
                    })
                }
                </div>
        <div className="swiper-pagination"></div>
       
    </div>
    </div>
  )
}

